<template>
	<view class="navbar" :style="{paddingTop: disTop + 'px'}">
       <view class="floor1">
       	 <view class="logo">
       	 	<up-picker 
			:show="show" 
			:columns="columns" 
			keyName="label"
			@cancel="onCancelPicker"
			@confirm="onConfirmPicker"
			closeOnClickOverlay
			></up-picker>
			<up-button customStyle="width:66px" size="mini"  type="primary"  icon="map" :text="serverName" @click="show = true"></up-button>
       	 </view>
		 <view class="search">
		 		<up-input
		 		    placeholder="搜索"
		 		    prefixIcon="search"
		 		    prefixIconStyle="font-size: 22px;color: #909399"
					style="height: 18px;"
					@confirm="onSearch"
		 		></up-input>
		 </view>
       </view>
	   <view class="floor2">
	   	  <view class="select">
	   	  	
	   	  </view>
	   </view>
	</view>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { useCurrentServe } from '@/stores/models/server';
import {ServerRange} from '../../constant/AppConfig'
import type { CustomNavBarProps } from '@/utils/page_types';
const show = ref(false);
const { safeAreaInsets } = uni.getSystemInfoSync()
let disTop:number;
(safeAreaInsets?.top)?disTop=safeAreaInsets.top:disTop=20;
console.log("disTop",disTop)
const serverName  = ref("电信1区")
const columns = reactive([
   ServerRange
]);
const serverStore  =  useCurrentServe();
const props = defineProps<CustomNavBarProps>()

const onCancelPicker = (e:any)=>{
	show.value=false;
	console.log("cancel",e)
}
const onConfirmPicker =(e:any)=>{
	show.value=false;
	serverName.value = e.value[0]?.label
    serverStore.setSeverId(e.value[0]?.id);
	props.reload();
}

const onSearch =(value:string)=>{
	console.log("onsearch",value)
    props.onSearch(value)
}

</script>

<style lang="scss">
.navbar{
	display: flex;
	flex-direction: column;
	position: relative;
	padding-top: 20px;
	width: 100%;
	height: 50px;
	background-color: #007aff;
}
.floor1{
	display: flex;
	justify-content: left;
	align-items: center;
	padding-left: 18px;
	padding-right: 18px;
}
.logo{
	padding-right: 18px;
}

.search{
	width: 180px;
}
	.custom-style {
		width: 400px;
	}

</style>